const CompressionPlugin  = require('compression-webpack-plugin');

module.exports = {
  // configureWebpack 来配置
  chainWebpack: config => {
    // 配置自定义打包入口
    config.when(process.env.NODE_ENV === 'production', config => {
      // 发布阶段
      config.entry('app').clear().add('./src/main-prod.js')
      // gzip压缩
      config.plugin('CompressionPlugin').use(CompressionPlugin, [{
        algorithm: 'gzip',
        test: /\.js$|\.html$|\.json$|\.css/,
        threshold: 10240,
        minRatio: 0.8 }])
      // 通过externals优化打包大小 只有在发布阶段需要这么做
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor',
        ElementUI: 'element-ui' })
      // 自定义欢迎页
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
    config.when(process.env.NODE_ENV === 'development', config => {
      // 开发阶段
      config.entry('app').clear().add('./src/main-dev.js')
      // 自定义欢迎页
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })

    // 配置图片规则
    const imagesRule = config.module.rule('images')
    imagesRule.uses.clear()
    // 删除images的rule
    imagesRule.use('file-loader')
      .loader('url-loader')
      .options({
        limit: 10000,
        // 设置图片大小
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[hash:8].[ext]'
          }
        }
      })
    // 配置字体图标规则
    const fontsRule = config.module.rule('fonts')
    fontsRule.uses.clear()
    fontsRule.test(/\.(woff|eot|ttf|otf)(\?.*)?$/i)
    fontsRule.use('file-loader')
      .loader('url-loader')
      .options({
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[hash:8].[ext]'
          }
        }
      })
  }
}
